<template>
	<el-row class="serverHisMemoryLoad">
		<el-col :span="24" class="serverHisMemoryLoad-box ScaleCSSViewport_unzoom">
			<!-- <div 
                id="HisMemoryLoad" 
                ref="HisMemoryLoad" 
                class="HisMemoryLoad"
                :class="{divHide: dataTotal == 0}">
            </div> -->
			<div ref="HisMemoryLoad" v-loading="!dataTotal">
			</div>
		</el-col>
	</el-row>
</template>

<script>
	import {
		fetchData
	} from '@/api/index.js';
	import bus from 'common/bus.js';

	export default {
		props: {
			allData: Object
		},
		data() {
			return {
				dataTotal: 0,
				perData: [],
				timeData: [],
				HisMemoryLoad: {},
				EChartsOption: {
					title: {
						left: 'center',
						text: '内存使用率'
					},
					grid: {
						left: 'center',
						top: 'middle',
						width: '95%',
						height: '80%',
						containLabel: true
					},
					tooltip: {
						trigger: 'axis',
						formatter: '{b}<br /> {a} {c}%'
					},
					xAxis: {
						type: 'category',
						data: this.timeData,
					},
					yAxis: {
						type: 'value'
					},
					dataZoom: [{
						type: 'inside',
						start: 0,
						end: 100
					}, {
						start: 0,
						end: 100,
						handleSize: '80%',
						handleStyle: {
							color: '#fff',
							shadowBlur: 3,
							shadowColor: 'rgba(0, 0, 0, 0.6)',
							shadowOffsetX: 2,
							shadowOffsetY: 2
						}
					}],
					series: {
						id:2,
						name: "内存使用率",
						type: 'line',
						// showSymbol: false,
						data: this.perData,
					}
				}
			}
		},
		created() {
			this.getTableData();
			
		},
		mounted() {
			this.HisMemoryLoad = this.$echarts.init(this.$refs.HisMemoryLoad);
			this.drawHisMemoryLoad();
			window.onresize = () => {
				let myEchart = this.$echarts.init(this.$refs.HisMemoryLoad);
				myEchart.resize();
			}
		},
		computed: {

		},
		methods: {
			getTableData() {
				this.dataTotal = this.allData.dataTotal;
				this.timeData = this.allData.Time;
				this.perData = this.allData.USED;
				//20210727
				// this.timeData = this.allData.Time;
				// this.perData = this.allData.Idle;
				
				this.$nextTick(function() {
					this.HisMemoryLoad.setOption({
						xAxis: {
							data: this.timeData
						},
						series: {
							data: this.perData
						}
					});
				})
			},
			
			drawHisMemoryLoad() {
				this.HisMemoryLoad.setOption(this.EChartsOption);
			},
		},
		watch: {
			allData: {
				handler(newValue, oldValue) {
					this.getTableData();
					if (newValue.length > 1) {
						this.drawHisFileSystemLoad();
					}
				},
				deep: true
			}
		}
	}
</script>
<style scoped>
	.serverHisMemoryLoad {
		height: 100%;
		margin-bottom: 0 !important;
	}

	.serverHisMemoryLoad-box {
		height: 100%;
	}

	.serverHisMemoryLoad-box div {
		height: 100%;
	}

	.divHide {
		display: none;
	}

	.noDataBox {
		height: 100%;
		text-align: center;
	}

	.noDataBox::before {
		display: inline-block;
		content: "";
		height: 100%;
		vertical-align: middle;
	}

	.noDataBox span {
		font-size: xx-large;
	}
</style>
